<script setup lang='ts'>
import { PureTableBar } from "@/components/RePureTableBar";
import { useMyInsurance } from "./hooks/MyInsurance"
const {
  // seal,
  columns,
  dataList,
  loading,
  btnloading,
  pagination,
  SendData,
  carmodel,
  close_from,
  stubim_from,
  car_insurance_item,
  handleSizeChange,
  handleCurrentChange
} = useMyInsurance()
import { SpliceDate } from "@/utils/public/method"
</script>

<template>
  <div class="main">
    <PureTableBar title="投保列表" class="list_hei">
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive :loading="loading"
          size="small" :data="dataList" max-height="650" :columns="columns" :checkList="checkList"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :pagination="pagination"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' @click="SendData(row)" size="small" text :disabled="!(row.insureResult === null)">
              {{
                row.insureResult === null ? '投保决策' : '已' + row.insureResult
              }}</el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>

    <ReDialog :width="750" :height="550" :models="carmodel" @Closes="close_from()">
      <template #header>
        <h2 style="text-align: center;">投保决策</h2>
      </template>
      <template #main>
        <el-scrollbar height="480px">
          <div class="dia_main">
            <h3>尊敬的{{ car_insurance_item.piApplicant }}先生/女生</h3>
            <h3>你好</h3>
            <p class="dia_content">您于
              <span>{{ car_insurance_item.applyTime }}</span>
              申请的投保由<span>xx保险股份有限公司</span>
              承保的<span>{{ car_insurance_item.pTypeName }}</span>
              最终{{ car_insurance_item.pType }}保费合计为<span>{{ car_insurance_item.finalPrice
              }}</span>元，详细信息见附表。
            </p>
            <p class="dia_content">确定投保请点击【同意】按钮，拒绝投保请点击【拒绝】按钮。</p>
            <h3>附表：</h3>
            <div class="dia_table">
              <p class="dia_table_title">xx保险股份有限公司最终{{ car_insurance_item.pType }}保费核定表</p>
              <h4 class="dia_table_tips">投保信息</h4>
              <!-- 车险 -->
              <div class="car_insurance_item" v-if="car_insurance_item.pType === '车险'">
                <dl class="car_insurance_item_dl">
                  <dd>保单号</dd>
                  <dd> {{ car_insurance_item.piNumber }} </dd>
                </dl>
                <dl class="car_insurance_item_dl">
                  <dd>保险产品名称</dd>
                  <dd>{{ car_insurance_item.ppName }}</dd>
                </dl>
                <dl class="car_insurance_item_dl">
                  <dd>投保人</dd>
                  <dd>{{ car_insurance_item.piApplicant }}</dd>
                </dl>
                <dl class="car_insurance_item_dl">
                  <dd>年龄</dd>
                  <dd>{{ car_insurance_item.applicantAge }}</dd>
                </dl>
                <dl class="car_insurance_item_dl">
                  <dd>性别</dd>
                  <dd>{{ car_insurance_item.applicantSex }}</dd>
                </dl>
                <dl class="car_insurance_item_dl">
                  <dd>投保人类别</dd>
                  <dd>{{ car_insurance_item.carType }}</dd>
                </dl>
                <dl class="car_insurance_item_dl">
                  <dd>车辆用途</dd>
                  <dd>{{ car_insurance_item.carUse }}</dd>
                </dl>
                <dl class="car_insurance_item_dl">
                  <dd>座位数/吨位数</dd>
                  <dd>{{ car_insurance_item.seatTonnage }}</dd>
                </dl>
                <dl class="car_insurance_item_dl">
                  <dd>车辆使用年限</dd>
                  <dd>{{ car_insurance_item.carUseYear }}</dd>
                </dl>
                <dl class="car_insurance_item_dl">
                  <dd>新车购置价</dd>
                  <dd>{{ car_insurance_item.buyCarPrice }}</dd>
                </dl>
                <dl class="car_insurance_item_dl">
                  <dd>出险次数</dd>
                  <dd>{{ car_insurance_item.count }}</dd>
                </dl>
                <dl class="car_insurance_item_dl">
                  <dd>申请时间</dd>
                  <dd>{{ SpliceDate(car_insurance_item.applyTime) }}</dd>
                </dl>
              </div>
              <!-- 意外险-健康险 -->
              <div class="car_YWJK" v-else>
                <div class="car_insurance_item">
                  <dl class="car_insurance_item_dl">
                    <dd>保单号</dd>
                    <dd>{{ car_insurance_item.piNumber }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>保险产品名称</dd>
                    <dd>{{ car_insurance_item.ppName }}</dd>
                  </dl>
                </div>
                <p class="car_YWJK_title">投保人</p>
                <div class="car_insurance_item">
                  <dl class="car_insurance_item_dl">
                    <dd>姓名</dd>
                    <dd>{{ car_insurance_item.piApplicant }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>年龄</dd>
                    <dd>{{ car_insurance_item.applicantAge }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>性别</dd>
                    <dd>{{ car_insurance_item.applicantSex }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>身份证号码</dd>
                    <dd>{{ car_insurance_item.idCard }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>电话号码</dd>
                    <dd>{{ car_insurance_item.phone }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd></dd>
                    <dd></dd>
                  </dl>
                </div>
                <p class="car_YWJK_title">被保险人</p>
                <div class="car_insurance_item">
                  <dl class="car_insurance_item_dl">
                    <dd>姓名</dd>
                    <dd>{{ car_insurance_item.assured }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>年龄</dd>
                    <dd>{{ car_insurance_item.assuredAge }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>性别</dd>
                    <dd>{{ car_insurance_item.assuredSex }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>身份证号码</dd>
                    <dd>{{ car_insurance_item.assuredIDCard }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>职业</dd>
                    <dd>{{ car_insurance_item.assuredJob }}</dd>
                  </dl>
                  <dl class="car_insurance_item_dl">
                    <dd>申请时间</dd>
                    <dd>{{ SpliceDate(car_insurance_item.applyTime) }}</dd>
                  </dl>
                </div>
              </div>
              <h4 class="dia_table_tips">投保信息</h4>
              <el-table border :data="car_insurance_item.detail" style="width: 100%">
                <el-table-column type="index" width="50" />
                <el-table-column prop="projectName" label="保障项目" />
                <el-table-column prop="range" label="保险范围" />
                <el-table-column prop="pSelect" label="保额选项（元）" />
                <el-table-column prop="premium" label="基础保费（元）" />
              </el-table>
              <div class="price_bottom">
                <dl class="price_bottom_des">
                  <dd>合计</dd>
                  <dd>{{ car_insurance_item.foundAmount }}</dd>
                </dl>
                <div class="FLTZ__des" v-if="car_insurance_item.pType === '车险'">
                  <dl>
                    <dd></dd>
                    <dd>费率调整系数</dd>
                    <dd></dd>
                  </dl>
                  <dl>
                    <dd>NCD系数</dd>
                    <dd>交通违法系数</dd>
                    <dd>自主定价系数</dd>
                  </dl>
                  <dl>
                    <dd>{{ car_insurance_item.ncdCoef }}</dd>
                    <dd>1.0</dd>
                    <dd>{{ car_insurance_item.actCoef }}</dd>
                  </dl>
                </div>
                <div class="FLTZ__tips" v-if="car_insurance_item.pType === '车险'">
                  <dl>
                    <dt>最终车险保费：{{ car_insurance_item.finalPrice }}元</dt>
                  </dl>
                </div>
                <dl class="stubim_msg">
                  <dd>承保保险公司:
                    <span id="seal">
                      <img v-if="car_insurance_item.isStamp" src="@/assets/studen/images/seal01.png" />
                      <span @click="car_insurance_item.isStamp = 1" v-else="car_insurance_item.isStamp">盖章</span>
                    </span>
                  </dd>
                  <dd>发送时间:{{ car_insurance_item.priceTime }}
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </template>
      <template #footer>
        <el-button type="primary" @click="stubim_from(1)" :loading="btnloading">同意 </el-button>
        <el-button @click="stubim_from(0)" :loading="btnloading"> 拒绝 </el-button>
      </template>
    </ReDialog>

    <!-- 健康-意外险 -->
  </div>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);
$ebeef5-color: #ebeef5;

.dia_main {

  h3,
  p {
    text-align: left;

  }

  .dia_content {
    text-indent: 2rem;
    font-size: 14px;

    span {
      border-bottom: 1px solid #000;
      padding: 0 5px;
    }
  }
}

.dia_table_tips {
  background: #ccc;
  line-height: 32px;
  text-align: left;
  padding-left: 10px;
  font-size: 16px;
  font-weight: bold;
}

.car_insurance_item {
  display: flex;
  flex-wrap: wrap;

  .car_insurance_item_dl {
    width: 50%;
    display: flex;
    align-items: center;


    dd {
      font-size: 14px;

      &:nth-child(1) {
        width: 45%;
        border: 1px solid $ebeef5-color;
        font-size: 14px;
        font-weight: bold;
        line-height: 24px;
        height: 26px;
        padding: 0 5px;
      }

      &:nth-child(2) {
        width: 55%;
        border: 1px solid $ebeef5-color;
        text-align: left;
        line-height: 24px;
        height: 26px;
      }

    }
  }
}

.price_bottom {
  border: 1px solid $ebeef5-color;

  .price_bottom_des {
    display: flex;
    align-items: center;
    line-height: 32px;

    dd {
      &:nth-child(1) {
        width: 76.8%;
        text-align: right;
        border-right: 1px solid $ebeef5-color;
        padding-right: 15px;
      }

      &:nth-child(2) {
        text-align: center;
        padding-left: 10px;
        // width: 20%;
      }
    }
  }

  .stubim_msg {
    border-top: 1px solid $ebeef5-color;
    font-size: 14px;

    #seal {
      cursor: pointer;
      color: red;
      position: relative;

      img {
        position: absolute;
        width: 150px;
        max-width: 150px;
        height: 150px;
        right: -25px;
        top: -54px;
        z-index: 10;
      }
    }

    dd {

      line-height: 32px;
      width: 90%;
      text-align: right;
    }
  }

}

.car_YWJK {
  .car_YWJK_title {
    text-align: left;
    line-height: 30px;
    padding-left: 5px;
    font-weight: bold;
  }
}

.FLTZ__des {
  width: 100%;
  display: flex;
  align-items: center;

  dl {
    width: 33%;

    dd {
      border: 1px solid $ebeef5-color;
      line-height: 28px;
      height: 32px;
      text-align: center;
    }

    &:nth-child(1) {
      border: 1px solid $ebeef5-color;
      font-weight: bold;

      dd {
        border: none;
      }
    }
  }
}

.FLTZ__tips {
  text-align: right;
  padding-right: 10px;

  dt {
    font-weight: bold;
  }

  dt,
  dl {
    line-height: 28px;
  }
}

.dia_table {
  .dia_table_title {
    text-align: center;
    line-height: 28px;
    border: 1px solid $ebeef5-color;
  }
}
</style>
